<template>
  <el-dialog title="新增车辆理赔" :visible.sync="open" width="800px">
    <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="160px">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="车牌号:" prop="carNo">
            <el-autocomplete v-model.trim="ruleForm.carNo" :fetch-suggestions="requireQuerySearchAsync"
                             placeholder="请输入车牌号" :trigger-on-focus="false" @select="handleSelect">
              <template slot-scope="{ item }">
                <div class="product-item">
                  <div class="name">
                    <span>{{ item.carNo }}-{{ item.vinNo }}</span>
                  </div>
                </div>
              </template>
            </el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车架号:" prop="vinNo">
            <el-input v-model="ruleForm.vinNo" disabled size="mini"/>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="品牌/车系/车型:" prop="modelName">
            <div style="display: flex">
              <el-input v-model="ruleForm.modelName" disabled/>
              <el-input v-model="ruleForm.seriesName" disabled/>
              <el-input v-model="ruleForm.brandName" disabled/>
            </div>

          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆产权:" prop="propertyRightName">
            <el-input v-model="ruleForm.propertyRightName" disabled size="mini"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出险日期:" prop="accidentTime">
            <el-date-picker v-model="ruleForm.accidentTime" type="date" placeholder="请选择出险日期"
                            :disabled="ruleForm.carId === null" value-format='yyyy-MM-dd' @change="handleTime"
                            style="width: 100%;">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商业险保单号:" prop="syxPolicyCode">
            <el-input v-model="ruleForm.syxPolicyCode" disabled placeholder="请输入交强险保单号" size="mini"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="交强险保单号:" prop="jqxPolicyCode">
            <el-input v-model="ruleForm.jqxPolicyCode" disabled placeholder="请输入交强险保单号" size="mini"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="被保险人:" prop="insuredName">
            <el-input v-model="ruleForm.insuredName" disabled placeholder="请输入被保险人" size="mini"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getAddSettlementDetails,
  submitAddSettlements,
  getInsuranceTime,
} from "@/api/bxlp/settlement.js";
import LinkageSelect from "../../../components/linkageSelect.vue";

export default {
  name: "addCarDialog", //新增车辆理赔
  components: {LinkageSelect},
  computed: {},
  watch: {},
  data() {
    var validateModelName = (rule, value, callback) => {
      if (this.ruleForm.modelName === "") {
        callback(new Error("品牌/车系/车型(车牌号错误)"));
      } else {
        callback();
      }
    };
    var timeDate = async (rule, value, callback) => {
      let that = this
      if (value === '') {
        return callback(new Error('出险日期能为空'));
      } else {
        let obj = {
          settlementDate: that.ruleForm.accidentTime,
          carId: that.ruleForm.carId,
        }
        const res = await getInsuranceTime(obj)
        if (res) {
          that.ruleForm.jqxPolicyCode = res.jqxPolicyCode;
          that.ruleForm.syxPolicyCode = res.syxPolicyCode;
          callback()
        } else {
          callback(new Error('出险日期不正确'));
        }

      }
    }
    return {
      open: false,
      ruleForm: {
        carNo: "",
        vinNo: "",
        propertyRightName: "",
        accidentTime: "",
        syxPolicyCode: "",
        jqxPolicyCode: "",
        modelName: "",
        seriesName: "",
        brandName: "",
        carId: null,
        insuredName:''
      },
      rules: {
        carNo: [{required: true, message: "请输入车号", trigger: "blur"}],
        vinNo: [{required: true, message: "请输入车架号", trigger: "blur"}],
        modelName: [
          {required: true, validator: validateModelName, trigger: "blur"},
        ],
        propertyRightName: [
          {required: true, message: "请输入车辆产权", trigger: "blur"},
        ],
        accidentTime: [
          {required: true, validator: timeDate, trigger: "change"},
        ],
        syxPolicyCode: [
          {
            required: true,
            message: "请输入交强险保单号(出险日期错误)",
            trigger: "blur",
          },
        ],
        jqxPolicyCode: [
          {
            required: true,
            message: "请输入交强险保单号(出险日期错误)",
            trigger: "blur",
          },
        ],
      },
      linkageList: [],
      carNoList: [],
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    linkageChange(val) {
      this.linkageList = val;
      if (val) {
        this.ruleForm.brandName = val[0] ? val[0].name : "";
        this.ruleForm.seriesName = val[1] ? val[1].name : "";
        this.ruleForm.modelName = val[2] ? val[2].name : "";
        this.$refs.ruleForm.clearValidate("clearValidate");
      } else {
        this.ruleForm.brandName = "";
        this.ruleForm.seriesName = "";
        this.ruleForm.modelName = "";
      }
      this.$forceUpdate();
    },
    handleOpen() {
      this.open = true;
    },

    cancel() {
      this.ruleForm = {
        carNo: "",
        vinNo: "",
        propertyRightName: "",
        accidentTime: "",
        syxPolicyCode: "",
        jqxPolicyCode: "",
        modelName: "",
        seriesName: "",
        brandName: "",
        carId: null,
      };
      this.linkageList = [];
      this.open = false;
    },

    async requireQuerySearchAsync(queryString, cb) {
      const res = await getAddSettlementDetails(queryString);
      if (res.code === 200) {
        this.carNoList = res.data;
      } else {
        this.carNoList = [];
      }
      let results = this.carNoList;
      cb(results);
    },

    handleSelect(val) {
      if (val) {
        this.ruleForm.carNo = val.carNo;
        this.ruleForm.vinNo = val.vinNo;
        this.ruleForm.modelName = val.modelName;
        this.ruleForm.seriesName = val.seriesName;
        this.ruleForm.brandName = val.brandName;
        this.ruleForm.propertyRightName = val.propertyRightName;
        this.ruleForm.carId = val.carId;
        this.ruleForm.insuredName  =val.insuredName
      }
    },

    handleTime(val) {
      if (val) {
        // this.handleTimeData();
      }
    },

    handleTimeData() {
      let obj = {
        settlementDate: this.ruleForm.accidentTime,
        carId: this.ruleForm.carId,
      };
      getInsuranceTime(obj).then((res) => {
        if (res) {
          this.ruleForm.jqxPolicyCode = res.jqxPolicyCode;
          this.ruleForm.syxPolicyCode = res.syxPolicyCode;
        } else {
          this.ruleForm.accidentTime = ''
        }

      });
    },

    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          submitAddSettlements(this.ruleForm).then((res) => {
            let obj = {
              jqxPolicyCode: this.ruleForm.jqxPolicyCode,
              syxPolicyCode: this.ruleForm.syxPolicyCode,
              accidentTime: this.ruleForm.accidentTime,
            };
            let aaa = JSON.stringify(obj);
            this.$router.push({
              name: "SettlementDetails",
              query: {
                type: "edit",
                carNo: this.ruleForm.carNo,
                obj: aaa,
              },
            });
            this.open = false;
          });
        }
      });
    },
  },
};
</script>

<style scoped lang=""></style>


